<template>
  <div class="task-editor">
    <div class="editor-header">
      <span class="title">{{ currentTab.name }}</span>
      <div class="btns">
        <el-button size="mini" @click="run">运行</el-button>
        <el-button size="mini" @click="stopTask">停止</el-button>
        <el-button size="mini" @click="saveTask">保存</el-button>
        <el-button size="mini" type="primary" @click="drawer = true">作业设置</el-button>
      </div>
    </div>
    <div class="editor-content">
      <data-code-editor
        ref="coder"
        :value="currentTab.content"
        @input="updateContent"
      ></data-code-editor>
    </div>

    <el-dialog :visible.sync="excuDateDialog" title="选择计划时间" width="30%">
      <el-form>
        <el-form-item label="计划时间" required>
          <el-date-picker
            v-model="execution_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="excuDateDialog = false">取 消</el-button>
        <el-button type="primary" @click="runTask">确 定</el-button>
      </div>
    </el-dialog>

    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      append-to-body
      title="作业设置"
      size="40%"
    >
      <task-setting v-if="drawer" :id="currentTab.id"></task-setting>
    </el-drawer>
  </div>
</template>
<script>
import DataCodeEditor from "../components/data-code-editor";
import TaskSetting from "./task-setting";
import { mapState, mapMutations } from "vuex";
export default {
  name: "TaskEditor",
  components: { DataCodeEditor, TaskSetting },
  data() {
    return {
      excuDateDialog: false,
      execution_date: "",
      drawer: false,
      dag_id: "",
      task_id: ""
    };
  },
  computed: {
    ...mapState({
      currentTab: ({ data }) => data.currentTab
    })
  },
  watch: {
    ["currentTab.id"]: {
      handler(val) {
        this.$refs.coder.setValue(this.currentTab.content);
      }
    }
  },
  methods: {
    ...mapMutations(["updataTabContent", "setCurrentTab"]),
    updateContent(content) {
      let tab = Object.assign({}, this.currentTab, { content });
      this.updataTabContent(tab);
    },
    run() {
      let { content } = this.currentTab;
      if (/{{[d|t]s/.test(content)) {
        this.excuDateDialog = true;
      } else {
        this.runTask();
      }
    },
    runTask() {
      let { execution_date } = this;
      let param = { task_id: this.currentTab.id };
      if (this.excuDateDialog) {
        param.execution_date = +new Date(execution_date);
      } else {
        param.execution_date = null;
      }
      this.$http.task.runTask(param).then(res => {
        this.excuDateDialog = false;
        this.$message({
          type: "success",
          message: "运行成功"
        });

        this.$bus.$emit("refresh-task-history");
      });
    },
    stopTask() {
      this.$http.task
        .stopTask({
          dag_id: this.currentTab.dag_id,
          task_id: this.currentTab.task_id,
          execution_date: this.currentTab.execution_date
        })
        .then(res => {
          this.$bus.$emit("refresh-task-history");
        });
    },
    saveTask() {
      let { id, content } = this.currentTab;
      this.$http.task.updateTask({ id, content }).then(res => {
        this.$message({
          type: "success",
          message: "保存成功"
        });
        // 同步全局变量
        let curContent = {
          ...this.currentTab,
          content
        };
        this.setCurrentTab(curContent)
      });
    }
  }
};
</script>
<style lang="scss">
.task-editor {
  height: 50%;
  flex: 1;
  position: relative;
  .editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e7ed;
    padding: 8px 8px;
  }
  .editor-content {
    height: calc(100% - 40px);
    overflow: auto;
    .CodeMirror {
      height: 100%;
    }
  }
}
.setting-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>
